<!-- 文本重叠排列 -->
<template>
  <main :id="parentId" class="text-overlap-div">
    <div :id="id" class="text-overlap"><slot></slot></div>
  </main>
</template>
<script lang="ts">
export default {
  props:{
    backgroundColor:{type:String},
    color:{type:String},
    fontSize:{type:String},
    letterSpacing:{type:String}
  },
  components: {},
  data() {
    return {
      id: new Date().getTime() + "_keller_text-overlap_" + Math.random(),
      parentId: new Date().getTime() + "_keller_text-overlap-div_" + Math.random()
    }
  },
  methods: {},
  computed: {},
  watch: {},
  mounted() {

    //获取根节点，为根节点设置变量
    const root = document.getElementById(this.parentId);
    root.style.setProperty("--bgColor",this.$props.backgroundColor || "black");
    root.style.setProperty("--color",this.$props.color || "white");

    //将div中的文字替换成span标签包括的单个字符
    const div = document.getElementById(this.id);
    div.style.setProperty("--fontSize",this.$props.fontSize || "64px");
    div.style.setProperty("--letterSpacing",this.$props.letterSpacing || "-10px");
    div.innerHTML = div.textContent
        .split("")
        .map((s) => "<span>" + s + "</span>")
        .join("");
  }
}
</script>
<style scoped>
.text-overlap-div{
  background-color: var(--bgColor);
  color: var(--color);
}

.text-overlap{
  font-size: var(--fontSize);
  font-weight: bolder;
  letter-spacing: var(--letterSpacing);
  display: flex;
  transform-style: preserve-3d;
  flex-wrap: wrap;
  justify-content: center;
}

.text-overlap :deep(span){
  text-shadow: 10px 0 10px #000;
  transform: perspective(500px) rotateY(-30deg);
  transition: 1.5s;
  cursor: pointer;
}

.text-overlap :deep(span):hover{
  transform: perspective(500px) rotateY(-300deg);
}
</style>